/*
  学习目标：使用Action 创建函数, 减少样板代码, 增加代码提示
*/

import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addAction, desAction } from "./store/action/index";

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show && <Son />}
    </div>
  );
}

function Son() {
  const count = useSelector((state) => state.count);

  const dispatch = useDispatch();

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      <button
        // 3. 使用Action创建函数, 替换对象写法
        onClick={() => dispatch(addAction(1))}
      >
        +1
      </button>

      <button onClick={() => dispatch(addAction(5))}>+5</button>
      <button onClick={() => dispatch(addAction(10))}>+10</button>
      <button onClick={() => dispatch(desAction(1))}>-1</button>
      <button onClick={() => dispatch(desAction(5))}>-5</button>
      <button onClick={() => dispatch(desAction(6))}>-10</button>
    </div>
  );
}
